<template>
  <div>
    <div>
      <el-table
          v-loading="loading"
          element-loading-spinner="el-icon-loading"
          :data="tableData" border stripe :header-cell-class-name="'headerBg'">
        <el-table-column prop="id" label="ID" width="100"></el-table-column>
        <el-table-column prop="token" label="token"></el-table-column>
        <el-table-column prop="website_type" label="token类型"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleUpdate(scope.row)">修改密码</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 操作日志详细 -->
      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="ID" prop="id">
            <el-input v-model="form.id" placeholder="请输入ID值" />
          </el-form-item>
          <el-form-item label="token" prop="token">
            <el-input v-model="form.token" placeholder="请输入token值" />
          </el-form-item>
          <el-form-item label="token类型" prop="website_type">
            <el-input v-model="form.website_type" placeholder="请输入token类型值" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      name: "",
      pageNum:1,
      pageSize:5,
      total:0
    }
  },
  mounted(){
    document.title = 'ERP登录token修改';
  },
  created() {
    this.load()
  },
  methods: {
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const dataToSend = {
        id: row.id,
      };
      this.loading = true;
      axios.post("http://localhost:34343/token/info",dataToSend).then(res => {
        this.form = res.data;
        this.open = true;
        this.title = "修改";
      });
    },
    load() {
      axios.get("http://localhost:34343/token/list", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name
        }
      }).then(res => {
        if (res.data) {
          this.tableData = res.data.data;
          // this.total = res.data.total;
        } else {
          // 处理数据格式不正确或其他情况
          this.$message.error('加载数据失败，响应格式不正确');
        }
        this.loading = false;
      }).catch(error => {
        this.loading = false;
        // 处理请求错误
        console.error('请求失败：', error);
        this.$message.error('加载数据失败，请检查网络连接或稍后重试');
      });
    },
    update(id) {
      const dataToSend = {
        id: id,
      };
      this.loading = true;
      axios.post("http://localhost:34343/token/update",dataToSend).then(res => {
        console.log(res)
        if (res.status===200) {
          this.$message.success("更新成功")
          this.load()
        } else {
          this.$message.error("dataToSend失败")
        }
      })
    },
  }
}
</script>

<style>

</style>
